<template>
  <div class="year-tabs">
    <button class="year-tab" :class="{ active: selectedYear === null }" @click="selectYear(null)">
      全部
    </button>
    <button
      v-for="year in availableYears"
      :key="year"
      class="year-tab"
      :class="{ active: selectedYear === year }"
      @click="selectYear(year)"
    >
      {{ year }}
    </button>
  </div>
</template>

<script setup>
defineProps({
  availableYears: {
    type: Array,
    required: true,
  },
  selectedYear: {
    type: [Number, null],
    required: true,
  },
})

const emit = defineEmits(['update:selectedYear'])

const selectYear = (year) => {
  emit('update:selectedYear', year)
}

defineOptions({ name: 'YearTabs' })
</script>

<style lang="scss" scoped>
.year-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  justify-content: flex-start;
  margin-bottom: 3rem;
  padding: 0.5rem 0;
  border-radius: 0.75rem;
  background-color: var(--bg-light);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--bg-light);

  &::-webkit-scrollbar {
    height: 6px;
    background: var(--bg-light);
  }
  &::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 3px;
  }
  &::-webkit-scrollbar-track {
    background: var(--bg-light);
  }

  .year-tab {
    flex: 0 0 auto;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: none;
    border: none;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;

    &:hover:not(.active) {
      color: var(--color-primary);
      background-color: rgba(81, 138, 255, 0.1);
    }

    &.active {
      background-color: var(--color-primary);
      color: white;
      box-shadow: 0 2px 8px rgba(81, 138, 255, 0.2);
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .year-tabs {
    margin: 0 0.75rem 1.5rem;
    padding: 0.375rem 0;
    border-radius: 0.5rem;
    background-color: rgba(81, 138, 255, 0.05);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--bg-light);

    &::-webkit-scrollbar {
      height: 4px;
      background: var(--bg-light);
    }
    &::-webkit-scrollbar-thumb {
      background: var(--color-primary);
      border-radius: 2px;
    }
    &::-webkit-scrollbar-track {
      background: var(--bg-light);
    }

    .year-tab {
      flex: 0 0 auto;
      padding: 0.375rem 1rem;
      white-space: nowrap;
      font-size: 0.8125rem;

      &.active {
        box-shadow: none;
        background-color: var(--color-primary);
        color: white;
        font-weight: 600;
      }
    }
  }
}

// 暗色模式适配
:deep(html.dark) {
  .year-tabs {
    background-color: rgba(255, 255, 255, 0.05);

    .year-tab {
      &.active {
        background-color: var(--bg-light);
      }
    }
  }
}
</style>
